<!DOCTYPE html>
<html>

<head>
    <script src="https://unpkg.com/konva@8.3.5/konva.min.js"></script>
    <script src="./js/quilli.js"></script>
    <link rel="stylesheet" href="./css/quilli.snow.css" />

    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Rich text on Canvas Demo</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #f0f0f0;
        }

        #editor-container {
            height: 80px;
        }
    </style>
</head>

<body>
    <div id="editor-container">
        That is <u>some</u> <span style="color: red"> styled text</span> on
        <strong>canvas</strong>!
        <h2>What do you think about it?</h2>
    </div>
    Rendered stage:
    <div id="container"></div>
    <script>
        var quill = new Quill('#editor-container', {
            modules: {
                toolbar: [
                    [{ header: [1, 2, false] }],
                    ['bold', 'italic', 'underline'],
                    ['image', 'code-block'],
                ],
            },
            placeholder: 'Compose an epic...',
            theme: 'snow', // or 'bubble'
        });

        var width = window.innerWidth;
        var height = window.innerHeight;

        var stage = new Konva.Stage({
            container: 'container',
            width: width,
            height: height,
        });

        const layer = new Konva.Layer();
        stage.add(layer);

        const shape = new Konva.Image({
            x: 10,
            y: 10,
            draggable: true,
            stroke: 'red',
            scaleX: 1 / window.devicePixelRatio,
            scaleY: 1 / window.devicePixelRatio,
        });
        layer.add(shape);

        function renderText() {
            // convert DOM into image
            html2canvas(document.querySelector('.ql-editor'), {
                backgroundColor: 'rgba(0,0,0,0)',
            }).then((canvas) => {
                // show it inside Konva.Image
                shape.image(canvas);
            });
        }

        // batch updates, so we don't render text too frequently
        var timeout = null;

        function requestTextUpdate() {
            if (timeout) {
                return;
            }
            timeout = setTimeout(function() {
                timeout = null;
                renderText();
            }, 500);
        }

        // render text on all changes
        quill.on('text-change', requestTextUpdate);
        // make initial rendering
        renderText();
    </script>
</body>

</html>